Farben
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Farbe repräsentiert die Marke, sorgt aber als zusätzliches Mittel auch dafür, dass funktionale Elemente auf digitalen Plattformen für die Nutzer intuitiv erkennbar sind.
Grautöne dienen dazu Elemente zu gruppieren, zu trennen und den Seiten Struktur zu geben. Beispielsweise wenn Inhalte in Tabellen dargestellt werden oder als gruppierende Hintergrundelemente einzelner Produkte.
Signalfarben können verwendet werden wenn beispielsweise Benachrichtigungen, Warn-, Fehler- und Statusmeldungen eine erhöhte Aufmerksamkeit des Nutzers fordern.
Wann kommt dieses Element zum Einsatz?
Farbe kommt als visuelles Mittel der Informationsvermittlung aber auch als Repräsentant für die Marke zum Einsatz. Damit vor allem die Informationsvermittlung optimal erfolgen kann, sind folgende Dinge zu berücksichtigen.
Farbe nicht als einziges Mittel der Informationsvermittlung
Zur besseren Zugänglichkeit darf Farbe nicht als einziges visuelles Mittel benutzt werden, um Informationen zu vermitteln, eine Handlung zu kennzeichnen, eine Reaktion zu veranlassen oder ein visuelles Element zu unterscheiden (WCAG 1.4.1)
Kontrast zwischen Text bzw. Interaktionselement und Hintergrund:
Die Visuelle Darstellung von Text und Interaktionselementen wie z.B. funktionelle Icons müssen einen ausreichenden Kontrast aufweisen. (WCAG 1.4.3.)
Gewichtung
Die Menge der Verwendung der Farben soll sich ungefähr nach folgender Aufteilung richten:
UX Konzeption
Markenfarben
Funktionale Grautöne
Signalfarben
Signalfarben dürfen ausschließlich für Benachrichtigungen, Warn-, Fehler- und Statusmeldungen verwendet werden.
UI-Design
Tribello
Tribello
Primärfarbe
Honiggelb
Die Farbe Gelb wird in der Farbpsychologie oft mit dem Sommer und der Sonne verbunden. Der Farbton wirkt hell, heiter, freundlich, optimistisch, offen und kommunikativ. Das entspricht ganz dem Charakter unseres Bellos. Honiggelb wird als Akzentfarbe verwendet und nur selten als vollflächiges Element eingesetzt.
| CMYK: 0/33/100/5 |
| RGB: 240/174/0 |
| HEX: #f0ae00 |
Sekundärfarben
Indigo
Als Komplimentärfarbe wirkt Indigo entspannend. Es dämpft innere Unruhe. Wird hauptsächlich für Hervorhebungen verwendet.
| CMYK: 75/30/10/50 |
| RGB: 0/90/120 |
| HEX: #005a78 |
Kaffee
Statt schwarz wird die Farbe Kaffee z.B. bei allen Fließtext-Schriften verwendet.
| CMYK: 60/70/65/85 |
| RGB: 40/25/20 |
| HEX: #281914 |
Weiß
Weißraum wird als Gestaltungselement eingesetzt, damit die Marke luftig und sympathisch wirkt.
| CMYK: 0/0/0/0 |
| RGB: 250/250/250 |
| HEX: #ffffff |
Grau
Graue Elemente wie z.B. Blobs oder Hintergrundabgrenzungen ergänzen die Farbgestaltung und Layouts.
| CMYK: 75/30/10/50 |
| RGB: 227/227/227 |
| HEX: #e3e3e3 |